<template>
  <div>
    <!-- 面包屑导航 -->
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/home' }">
        <i class="el-icon-s-home"></i>
        首页
      </el-breadcrumb-item>
      <el-breadcrumb-item>
        <i class="el-icon-present" ></i> 
        产品类别
      </el-breadcrumb-item>
      <!-- 当前 -->
      <el-breadcrumb-item>{{jiahuogai}}</el-breadcrumb-item>
    </el-breadcrumb>
    <header>
      <div><i class="el-icon-arrow-left" @click="gotop" ></i></div>
      <h3>{{jiahuogai}}</h3>
    </header>
    <div id="tijiao">
      <!-- 添加 -->
      <el-form ref="form" :model="form" label-width="120px" :rules="rules"  v-if="a==0" >
        <el-form-item label="活动名称:" prop="name">
          <el-input v-model="form.name"  placeholder="输入商品名称"></el-input>
        </el-form-item>
        <el-form-item label="组内商品：">
          <el-input placeholder="请选择" :disabled="true">
            <el-button slot="append"  @click="dialogTableVisible = true">选择</el-button>
          </el-input>
        </el-form-item>
        <el-form-item label="是否显示状态：">
          <el-radio v-model="form.type" label="启用">启用</el-radio>
          <el-radio v-model="form.type" label="禁用">禁用</el-radio>
        </el-form-item>
        <el-form-item style="width:100%;display:flex;">
          <el-button type="primary" @click="onSubmit">保存</el-button>
          <el-button>取消</el-button>
        </el-form-item>
      </el-form>
      <!-- 修改 -->
      <el-form ref="form" :model="form" label-width="120px" :rules="rules"  v-else >
        <el-form-item label="活动名称:" prop="name">
          <el-input v-model="form.name"  :placeholder="list.name"></el-input>
        </el-form-item>
        <el-form-item label="组内商品：">
          <el-input placeholder="请选择" :disabled="true">
            <el-button slot="append"  @click="dialogTableVisible = true">选择</el-button>
          </el-input>
        </el-form-item>
        <el-form-item label="是否显示状态：">
          <el-radio v-model="form.type" label="启用" >启用</el-radio>
          <el-radio v-model="form.type" label="禁用">禁用</el-radio>
        </el-form-item>
        <el-form-item style="width:100%;display:flex;">
          <el-button type="primary" @click="onSubmit">保存</el-button>
          <el-button>取消</el-button>
        </el-form-item>
      </el-form>
      
      <el-dialog title="收货地址" :visible.sync="dialogTableVisible" append-to-body v-if="a==0" >
        <el-select v-model="fenlei" placeholder="选择商品分类">
            <el-option label="脑血管疾病" value="脑血管疾病"></el-option>
            <el-option label="感冒药" value="感冒药"></el-option>
            <el-option label="咳嗽药" value="咳嗽药"></el-option>
            <el-option label="失眠" value="失眠"></el-option>
            <el-option label="帕金森" value="帕金森"></el-option>
          </el-select>
        <el-input v-model="input" placeholder="输入品牌内容" style="width:600px" >
          <el-button slot="append" type="primary"  icon="el-icon-search" @click="sou">搜索</el-button>  
        </el-input>
        <el-table :data="state.slice((currentPage-1)*pageSize,currentPage*pageSize)">
          <el-table-column label="商品" width="550">
            <template slot-scope="scope">
              <img style="width:30px;height:40px" :src="scope.row.img" alt="">
            </template>
          </el-table-column>
          <el-table-column property="pice" label="价格" width="100"></el-table-column>
          <el-table-column property="inventory" label="库存" width="100"></el-table-column>
          <el-table-column property="address" label="操作">
             <template slot-scope="scope">
                  <el-button type="warning" icon="el-icon-check"  v-if="gg(scope.row.id)" @click="shan(scope.row.id)"></el-button>
                  <el-button type="success" v-else @click="xuan(scope.row.id)">选择</el-button>
                </template>
          </el-table-column>
        </el-table>
        <el-pagination
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-size="pageSize"
          layout=" prev, pager, next"
          :total='total'>
        </el-pagination>
      </el-dialog>

       <el-dialog title="收货地址" :visible.sync="dialogTableVisible" append-to-body v-else  >
        <el-select v-model="fenlei" placeholder="选择商品分类">
            <el-option label="脑血管疾病" value="脑血管疾病"></el-option>
            <el-option label="感冒药" value="感冒药"></el-option>
            <el-option label="咳嗽药" value="咳嗽药"></el-option>
            <el-option label="失眠" value="失眠"></el-option>
            <el-option label="帕金森" value="帕金森"></el-option>
          </el-select>
        <el-input v-model="input" placeholder="输入品牌内容" style="width:600px" >
          <el-button slot="append" type="primary"  icon="el-icon-search" @click="sou">搜索</el-button>  
        </el-input>
        <el-table :data="state.slice((currentPage-1)*pageSize,currentPage*pageSize)">
          <el-table-column label="商品" width="550">
            <template slot-scope="scope">
              <img style="width:30px;height:40px" :src="scope.row.img" alt="">
            </template>
          </el-table-column>
          <el-table-column property="pice" label="价格" width="100"></el-table-column>
          <el-table-column property="inventory" label="库存" width="100"></el-table-column>
          <el-table-column property="address" label="操作">
             <template slot-scope="scope">
                  <el-button type="warning" icon="el-icon-check"  v-if="gg(scope.row.id)" @click="shan(scope.row.id)"></el-button>
                  <el-button type="success" v-else @click="xuan(scope.row.id)">选择</el-button>
                </template>
          </el-table-column>
        </el-table>
        <el-pagination
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-size="pageSize"
          layout=" prev, pager, next"
          :total='total'>
        </el-pagination>
      </el-dialog>
    </div>
    
  </div>
</template>

<script>
import { getzwyGroupList, getZwyShopListBx, postzwyGroupListAdd, postzwyShopListAdd, putzwyGroupListUpdate, putzwyShopListUpdate } from '@/utils/api';
export default {
  data(){
    return{
      input:'',
      a:0,
      jiahuogai:'添加商品',
      list:{},
      form: {
        name:'',
        shangpin:'',
        type:''
      },
      rules: {
        name: [
          { required: true, message: '请输入活动名称', trigger: 'blur' },
          { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
        ],
      },
      dialogTableVisible: false,
      dialogFormVisible: false,
      formLabelWidth: '120px',
      state:[],
      data:[],
      fenlei:'',
      currentPage: 1,
      pageSize:3,
      total:0,
      ids:[],
    }
  },
  methods:{
    onSubmit() {
      if(this.a==0){
        this.form.shangpin = JSON.stringify(this.ids)
        postzwyGroupListAdd(this.form).then(res=>console.log(res))
      }else{
        this.form.shangpin = JSON.stringify(this.ids)
        putzwyGroupListUpdate({...this.form,id:this.a}).then(res=>console.log(res))
      }
    },
    gotop(){
      this.$router.go(-1)
    },
    sou(){
      this.state = this.data.filter(i=>i.name == this.input&&i.fenlei == this.fenlei)
    },
    handleCurrentChange(val) {
      this.currentPage = val
    },
    tiao(val){
      this.pageSize=Number(val)
    },
    xuan(val){
      this.ids.push(val)
    },
    shan(val){
      this.ids = this.ids.filter(i=>i != val)
      this.$forceUpdate()
    },
    gg(id){
      return this.ids.some( item => item == id )
    }
  },
  created(){
    getZwyShopListBx().then(res=>{
      this.state = res.data.data
      this.data = res.data.data
      this.total = res.data.data.length
    })
    if(this.$route.params.id>0){
      this.a = this.$route.params.id
      this.jiahuogai = '修改商品'
      getzwyGroupList().then(res=>{
        let bb = res.data.data.filter(item=>item.id == this.$route.params.id)[0]
        console.log(bb);
        this.list = bb
        this.form.type = bb.type
        this.ids = JSON.parse(bb.shangpin)
      })
    }
  },
  
}
</script>

<style scoped>
header{
  width: 100%;
  height: 40px;
  line-height: 40px;
  background-color:rgba(185, 182, 182, 0.5);
  display: flex;
  margin-top:10px ;
  margin-bottom:10px ;
}
header div{
  width: 3%;
  height: 40px;
  line-height: 40px;
  font-size: 30px;
}
#tijiao{
  width: 65%;
  height: 100%;
  margin: 0 auto;
}
</style>